<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .button {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <button @click="text++">+</button> -->
        <q-button :round="true" width="200px" height="50" :text="text" @transfer="lanzi">
            <template #default>

            </template>
        </q-button>


    </div>
</body>
<script src="./vue.js"></script>
<script>
    const { ref, createApp, computed } = Vue;
    const app = createApp({
        setup() {
            let text = ref(0)
            function lanzi(zhitiao) {
                text.value = zhitiao

            }
            return {
                text, lanzi
            }
        }
    })



    app.component('q-button', {
        props: {
            width: {
                type: [String, Number],
                default: "300px"
            },
            height: {
                type: [String, Number],
                default: "50px"
            },
            backgroundColor: {
                type: [String],
                default: "green"
            },
            round: {
                type: [Boolean],
                default: false
            },
            roundSize: {
                type: Number,
                default: 30
            },
            text: {
                type: [String, Number],
                default: "按钮"
            },
            disabled: {
                type: Boolean,
                default: false
            }
        },

        setup(props, { emit }) {
            let options = computed(function () {
                return props
            })

            function tansform(n) {
                return isNaN(Number(n)) ? n : n + 'px'
            }

            function edit() {
                confirm(options.value.text)
                let text = options.value.text
                emit('transfer', text + 1)
            }
            return {
                options,
                tansform,
                edit
            }
        },
        template: `
                <div class="button" :style="{
					width:tansform(options.width),
					height:tansform(options.height),
					backgroundColor:options.backgroundColor,
					borderRadius:options.round?options.roundSize+'px':0,
				}" @click="edit">
				{{options.text}}</div>`
    })


    app.mount("#app")
</script>

</html>